import {Button, Card, message, Modal, Table} from "antd";
import {ArrowRightOutlined, PlusOutlined} from "@ant-design/icons";
import LinkButton from "../../components/link-button";
import {useEffect, useState} from "react";
import {addCategory, reqCategories, updateCategory} from "../../apis";
import AddForm from "./add-form";
import UpdateForm from "./update-form";

const Category = function (){

    // 设置一级分类列表初始值
    const [categories, setCategories] = useState([])
    // 设置列表数据加载值
    const [loading, setLoading] = useState(true)
    // 设置当前需要显示分类列表的parentId
    const [parentId, setParentId] = useState('0')
    // 当前需要显示分类列表的parentName 父级分类名称
    const [parentName, setParentName] = useState('')
    // 二级分类列表
    const [subCategories, setSubCategories] = useState([])
    // 控制模态框显示隐藏 0 不显示  1 显示新增 2 显示修改
    const [showStatus, setShowStatus] = useState(0)
    // 当前正在编辑的分类对象
    const [category, setCategory] = useState({})
    // 当前正在修改的分类名
    const [categoryName, setCategoryName] = useState('')

    // 假设父组件中有一个 state，用于保存选中的对象
    const [selectedCategory, setSelectedCategory] = useState(null);
    // 显示一级分类列表
    const showCategorys = () => {
        console.log('回到一级分类')
        setParentId('0')
        setParentName('')
        // 二级分类列表置空
        setSubCategories([])
    };
    // card左侧
    const title = parentId == '0' ? '一级分类列表' : (
        <span>
            <LinkButton onClick={showCategorys}>
                一级分类列表
            </LinkButton>
             <ArrowRightOutlined style={{margin: '0 10px'}}/>
            <span>{parentName}</span>
        </span>
    )
    // card右侧
    const extra = (
        <Button type={"primary"} onClick={showAdd}>
            <PlusOutlined />
            添加
        </Button>
    )

    useEffect(() => {
        getCategories()
        // 设置parentId为依赖项 变化时重新请求触发 旧版采用回调函数方式
        // 旧版setState 不能立即获取最新状态 而是异步更新
    }, [parentId]);

    // 获取一级分类列表数据
    const getCategories = async () => {
        console.log('此时的parentId',parentId)
        const res = await reqCategories(parentId)
        console.log('获取的一级分类列表数据',res)
        if(res.status === 0){
            // 取出分类列表数据
            if(parentId === '0'){
                // 一级分类
                setCategories(res.data)
                setLoading(false)
            }else{
                // 获取二级分类列表数据
                setSubCategories(res.data)
                setLoading(false)
            }
        }else {
            message.error('获取分类列表失败')
        }
    }

    // 初始化 Table所有列数据
    const initColumns = () => {
        // 表格列的配置描述
        const columns = [
            {
                title: '分类的名称',
                dataIndex: 'name', // 显示对应属性名
                key: 'name',
            },
            {
                title: '操作',
                width: 300,
                render: (category) => ( // 返回需要显示的界面标签
                    <span>
            <LinkButton onClick={() => showUpdate(category)}>修改分类</LinkButton>
                        {/*如何向事件回调函数传递参数: 先定义一个匿名函数, 在函数调用处理的函数并传入数据*/}
                        { parentId == '0' && <LinkButton onClick={() => showSubCategorys(category)}>查看子分类</LinkButton> }

          </span>
                )
            }
        ];
        return columns;
    }

    // 查看二级分类列表
    function showSubCategorys(category) {
        console.log('传递的一级列表对象', category)
        // 设置父级分类名称
        setParentName(category.name)
        setParentId(category._id)
        // 只用修改parentId  useEffect依赖项会监听重新请求
        // getCategories()
    }

    // 显示添加分类模态框
    function showAdd() {
        setShowStatus(1)
    }

    // 添加分类列表
    async function addCategories(category,categoryName) {
        // 发请求
        console.log('添加的分类对象', category, '添加的分类名称',categoryName)
        const res = await addCategory(categoryName,category.value)
        if(res.status === 0){
            message.success('添加分类成功')
            getCategories()
            setShowStatus(0)
        }
    }

    // 取消模态框
    function handleCancel() {
        setShowStatus(0)
    }

    // 显示修改模态框
    function showUpdate(category) {
        console.log('传递的分类对象', category)
        setShowStatus(2)
        setParentName(category.name)
        setCategory(category)
    }

    // 修改分类
    async function updateCategories(categoryName){
        // 隐藏修改模态框
        setShowStatus(0)
        console.log('当前修改的分类', category,' 修改的分类名', categoryName)
        const res = await updateCategory({
            categoryId: category._id,
            categoryName})
        if(res.status === 0){
            message.success('修改分类成功')
            getCategories()
            // 清除数据
        }
    }

    return (
        <Card title={title} extra={extra}>
            <Table
                bordered
                rowKey='_id'
                loading={loading}
                dataSource={parentId == '0' ? categories : subCategories}
                pagination={{ defaultPageSize: 5, showQuickJumper: true }}
                columns={initColumns()}
            />

            {/*旧版采用visible   setForm 传递form对象自定义函数 */}
            <Modal title="添加分类"
                   open={showStatus === 1}
                   onOk={() => addCategories(selectedCategory,categoryName)}
                   onCancel={handleCancel}>
                <AddForm
                    categorys={categories}
                    parentId={parentId}
                    setForm={setCategoryName}
                    setSelectedCategory={setSelectedCategory} // 将函数传递给子组件
                ></AddForm>
            </Modal>

            <Modal title="修改分类"
                   open={showStatus === 2}
                   onOk={() => updateCategories(categoryName)}
                   onCancel={handleCancel}>
                <UpdateForm
                    categoryName={parentName}
                    setForm={setCategoryName}
                ></UpdateForm>
            </Modal>
        </Card>
    )
}
export default Category